<template>
  <div ref="SelectBoxRef" class="select_container"  :style="attrs.style">
    <!--输入框区域-->
    <div class="input_area">
      <input
        @input="listenInput"
        v-model="modelValue"
        :placeholder="placeholder"/>
    </div>
  </div>

</template>

<script setup>
import {ref, reactive, watch} from "vue";
import {defineModel, onMounted, onBeforeUnmount,nextTick} from 'vue'
import { useAttrs } from 'vue'

const attrs = useAttrs()  // 获取父组件传递的所有属性（包括 style）
console.log(attrs.style)  // 输出：{ borderRadius: '8px 8px 0 0' }

defineOptions({
  name: "InputBox",
  inheritAttrs: false,
});

//传进来要处理的item
const props = defineProps({
  placeholder: {
    type: String,
    default: "请输入"
  },
  type: {
    type: String,
    default: "string"
  }
});


// 与父组件绑定值
const modelValue = defineModel()


function listenInput(e){
  console.log(e)
  //如果传入的输入框类型为数字，则限制输入为数字
  if (props.type == "number") {
    nextTick(() => {
      let value = e.target.value;

      console.log(e,"detail")

      // 一步完成所有处理的链式正则
      const formattedValue = value.toString()
        // 1. 过滤非法字符（保留数字和第一个小数点）
        .replace(/[^0-9.]/g, '')
        // 2. 处理多个小数点（保留第一个）
        .replace(/(\..*)\./g, '$1')
        // 3. 处理前导零（00123 → 123，但允许0.12）
        .replace(/^0+(?=\d)/, '')
        // 4. 处理以点开头的情况（.12 → 0.12）
        .replace(/^\./, '0.')
        // 5. 限制最多两位小数（12.345 → 12.34）
        .replace(/(\.\d{2})\d+/, '$1')
        // 6. 处理纯0的情况（允许清空）
        .replace(/^0$/, '');

      // 更新数据模型
     modelValue.value = formattedValue;

      // 强制同步视图值（解决显示不一致问题）
      if (e.target.value !== formattedValue) {
        e.target.value = formattedValue;
      }
    });
  }
}

</script>

<style lang="scss" scoped>
.select_container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #F0F2F7;
  padding: 6px 12px;
  border-radius: 8px;
  box-sizing: border-box;
}

.input_area {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .prepend-slot {
    flex-shrink: 0;
  }

  input {
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
  }
}

.input_area:hover .arrow {
  display: none;
  transition: all 0.6s;
}

.right_icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  img {
    width: 100% !important;
    height: 100% !important;
  }
}

.clear {
  display: none;
  transition: all 0.6s;
}

.input_area:hover .clear {
  display: flex;
}


.font_placeholder {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: normal;
  color: #808690;
}

.font_value {
  color: #1C1E24;
}

.items {
  width: 100%;
  position: absolute;
  z-index: 20;
  left: 0;
  top: 105%;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  color: #808690;
  padding: 4px 4px;
  max-height: 200px;
  overflow: auto;

  .item {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: normal;
    color: #808690;
  }

  .item_s {
    border-radius: 8px;
    background: #E6F9F5;
    font-weight: bold;
    color: #1e90ff;
  }
}
</style>
